import React, { Component } from "react"
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input
} from "antd"
import Link from "umi/link"
import { formatMessage } from "umi/locale"
import { connect } from "dva"
import EapParamsForm from "./eapForms/EapParamsForm"
import PcDataCraftForm from "./eapForms/PcDataCraftForm"
import PcDataManualForm from "./eapForms//PcDataManualForm"
import PcDataAlarmForm from "./eapForms/PcDataAlarmForm"
import PcDataStatusForm from "./eapForms/PcDataStatusForm"
import PcSignalStatusForm from "./eapForms/PcSignalStatusForm"
import EapSignalStatusForm from "./eapForms/EapSignalStatusForm"
import EqpDataCountForm from "./eapForms/EqpDataCountForm"
import EapMeterialDataForm from "./eapForms/EapMeterialDataForm"

import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from "react-konva"
import PcDataEmp from "./eapForms/PcDataEmp"
import SizeLayoutForm from "./hdForms/SizeLayoutForm"

@connect(({ hd, es }) => ({ hd, es }))
@Form.create()
class EapSettings extends Component {
  constructor(props) {
    super(props)
  }
  state = {
    userId: "",
    username: "",
    empcode: "上机时间",
    lotId: "" // 工单批次号
  }

  handleEmpReport = (e) => {
    const { dispatch } = this.props
    const { userId, username, empcode } = this.state
    dispatch({
      type: "es/handleEmpReport",
      payload: [userId, username, empcode]
    })
  }

  handleSendLotToEap = (e) => {
    const { dispatch } = this.props
    const { lotId } = this.state
    dispatch({
      type: "es/handleSendLotToEap",
      payload: lotId
    })
  }

  render() {
    const Panel = Collapse.Panel
    const { userId, username, empcode, lotId } = this.state
    const {
      serverEapParams,
      serverPcDataCraft,
      serverPcDataManual,
      serverPcDataAlarm,
      serverPcDataStatus,
      serverPcSignalStatus,
      serverEapSignalStatus,
      serverPcDataCount,
      serverEapMeterialData
    } = this.props.es
    const gridStyle1 = {
      width: "35%",
      textAlign: "left"
    }
    const gridStyle2 = {
      width: "65%",
      textAlign: "left"
    }

    return (
      <>
        <Card>
          <Row>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                表轮询间隔设置
              </span>
              <span style={{ marginLeft: 10 }}>员工工号:</span>
              <Input
                value={userId}
                style={{ width: 100 }}
                onChange={(e) => this.setState({ userId: e.target.value })}
              />
              <span style={{ marginLeft: 10 }}>员工姓名:</span>
              <Input
                value={username}
                onChange={(e) => this.setState({ username: e.target.value })}
                style={{ width: 100 }}
              />
              <span style={{ marginLeft: 10 }}>操作类型:</span>
              <Select
                style={{ width: 100, marginLeft: 10, marginRight: 10 }}
                defaultValue={empcode}
                onChange={(value) => this.setState({ empcode: value })}
              >
                <Select.Option value="上机时间">上机时间</Select.Option>
                <Select.Option value="下机时间">下机时间</Select.Option>
              </Select>
              <Button onClick={this.handleEmpReport} type="primary">
                上下机上报
              </Button>

              <span style={{ marginLeft: 50 }}>
                <font style={{ color: "#4169E1", fontSize: 18 }}>扫码工单:</font>
              </span>
              <Input
                value={lotId}
                onChange={(e) => {
                  this.setState({
                    lotId: e.target.value
                  })
                }}
                style={{ width: 250, marginLeft: 10, marginRight: 10 }}
              />
              <Button onClick={this.handleSendLotToEap} type="primary">
                扫码下发到Eap
              </Button>
            </div>
            <EapParamsForm serverEapParams={serverEapParams} />
          </Row>
          <Row style={{ marginTop: 15 }}>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                排板数量和排板方式配置表
              </span>
            </div>
            <SizeLayoutForm />
          </Row>
          <Row style={{ marginTop: 15 }}>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                工艺质量表(pc_data_craft)
              </span>
            </div>
            <PcDataCraftForm />
          </Row>

          <Row>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                手动参数调整表(pc_data_manualmaterial)
              </span>
            </div>
            <PcDataManualForm />
          </Row>
          <Row>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                设备报警表(pc_data_alarm)
              </span>
            </div>
            <PcDataAlarmForm />
          </Row>

          <Row>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                员工上下机记录上传(pc_data_emp)
              </span>
            </div>
            <PcDataEmp />
          </Row>

          <Row>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                不实时采集设备状态表(pc_data_status)
              </span>
            </div>
            <PcDataStatusForm />
          </Row>
          <Row>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                设备计数表(pc_data_count)
              </span>
            </div>
            <EqpDataCountForm />
          </Row>
          <Row>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                设备实时信号表(pc_signal_status)
              </span>
            </div>
            <PcSignalStatusForm />
          </Row>
          <Row>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: "green", fontWeight: "bold", fontSize: 18 }}>
                Eap实时信号表(eap_signal_status)
              </span>
            </div>
            <EapSignalStatusForm />
          </Row>
        </Card>
      </>
    )
  }
}
export default EapSettings
